<template>
  <div class="upload">
    <rh-button @click="()=>uploader.chooseFile()"
               type='f30'>点击上传</rh-button>
    <ul class="list">
      <li class="title">
        <span>名称</span>
        <span>状态</span>
        <span>进度</span>
        <span>操作</span>
      </li>
      <li v-for="(item,index) in fileList"
          :key="item.uid"
          class="content">
        <span>{{ item.fileName }}</span>
        <span>{{ item.status }}</span>
        <span>{{ item.percent || 0 }}</span>
        <span v-if="item.status==='error'"
              @click="reUpload(item)"
              class="btn">重传</span>
        <span v-if="item.status==='success'"
              @click="del(index)"
              class="btn">删除</span>
      </li>
    </ul>
  </div>
</template>

<script>
import Uploader from '@/components/basic/rh-upload/index'
import RhButton from '@/components/basic/rh-button'
export default {
  components: {
    RhButton
  },
  props: {
    url: {
      type: String,
      require: true
    },
    wrapper: {
      default: () => document.body
    },
    multiple: {
      type: Boolean,
      default: false
    },
    limit: {
      type: Number,
      default: -1
    },
    autoUpload: {
      type: Boolean,
      default: true
    },
    accept: {
      type: String,
      default: '*'
    },
    header: {
      type: Object,
      default () {
        return {}
      }
    },
    data: {
      type: Object,
      default () {
        return {}
      }
    },
    withCredentials: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      fileList: [],
      imgList: []
    }
  },
  mounted () {
    this.uploader = new Uploader({
      url: this.url, // 上传地址
      wrapper: this.wrapper, // 父级元素
      multiple: this.multiple, // 多选
      limit: this.limit, // 文件个数
      autoUpload: this.autoUpload, // 自动上传
      accept: this.accept, // 接收类型
      header: this.header, // xhr头部
      data: this.data, // xhr 传参数据
      withCredentials: this.withCredentials // 表示跨域请求时是否带上凭证cookie
    }).on('change', files => {
      this.fileList = files;
    })
      .on('progress', this.handleProgress)
      .on('success', data => {
        this.imgList.push({ name: data.img.file.name, url: `http://localhost:3000${data.img.file.path.slice(6)}` });
        this.$emit('change', this.imgList);
      })
  },
  beforeDestroy () {
    this.uploader.destroy();
  },
  methods: {
    handleProgress (e, file) {
      const index = this.fileList.findIndex(item => item.uid === file.uid);
      this.$set(this.fileList[index], 'percent', e.percent.toFixed(2));
    },
    reUpload (file) {
      this.uploader.upload(file);
    },
    del (index) {
      this.fileList.splice(index, 1);
      this.imgList.splice(index, 1);
      this.$emit('change', this.imgList);
    }
  }
}
</script>

<style lang="less" scoped>
.upload {
  width: 100%;
  box-sizing: border-box;
  padding: 10px;

  .list {
    margin-top: 10px;

    .title {
      margin-top: 5px;
      span {
        display: inline-block;
        width: 24%;
      }
    }
    .content {
      margin-top: 5px;
      span {
        font-size: 14px;
        display: inline-block;
        width: 24%;
        padding: 5px 0;
      }
      .btn {
        cursor: pointer;
      }
    }
  }
}
</style>